<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>红绿灯倒计时</title>
    <style>
    .box{
        width: 250px;
        margin: 100px auto;
    }
    .box div{
        margin-left:5px;
        float:left;
        width:50px;
        height:50px;
        border-radius:50px;
        border:1px solid #666;
    }
    .gray{
        background-color:#eee;
    }
    .red{
        background-color:red;
    }
    .yellow{
        background-color:yellow;
    }
    .green{
        background-color:#26ff00;
    }
    a{
        position: relative;
        right: 250px;
        float: right;
        font-size: large;
        text-decoration: none;
    }
    body{
            background-color: #F3EFE0;
        }
    .bot{
        color: #918E84;
        font-family:Arial, Helvetica, sans-serif;
        font-size: 24px;
        position: relative;
        top: 300px;
        right: 250px;
        float: right;
    }
    </style>
</head>
<body>
    <div class="box">
        <div id="red"></div>                        <!--红灯-->
        <div id="yellow"></div>                     <!--黄灯-->
        <div id="green"></div>                      <!--绿灯-->
        <div id="count" class="count" style="border: none; font-size: large;"></div>        <!--倒计时-->
    </div>
    <br><br><br>
    <a href="../章节目录/第六章.html">返回上一页</a>
    <script>
        //创建红,黄,绿灯对象,保存相关的数据
        var lamp = {
            //红灯对象
            red:{       //红灯相关数据
                obj:document.getElementById('red'),
                timeout: 30,
                style:['red','gray','gray'],
                next:'green'
            },
            //黄灯对象
            yellow:{    //黄灯相关数据
                obj:document.getElementById('yellow'),
                timeout: 5,
                style:['gray','yellow','gray'],
                next:'red'
            },
            //绿灯对象
            green:{     //绿灯相关数据
                obj:document.getElementById('green'),
                timeout: 35,
                style:['gray','gray','green'],
                next:'yellow'
            },
            //改变样式
            changeStyle(style){
                this.red.obj.className = style[0];
                this.yellow.obj.className = style[1];
                this.green.obj.className = style[2];
            }
        }
        //创建倒计时对象
        var count = {
            obj:document.getElementById('count'),
            change:function(num){
                this.obj.innerHTML = (num < 10) ? ('0' + num) : num;
            }
        }
        //初始化
        var now = lamp.green;
        var timeout = now.timeout;
        lamp.changeStyle(now.style);
        count.change(timeout);
        //定时器,每过一秒钟进行一次更新检测
        setInterval(function(){
            if(--timeout < 0){
                now = lamp[now.next];
                timeout = now.timeout;
                lamp.changeStyle(now.style);
            }
            count.change(timeout);
        },1000);
    </script>
    <div class="bot"><br>
        <h3>Please appreciate((●'◡'●))......</h3>
    </div>
</body>
</html>